<template>
    <div class="homepage-container">
        <!-- 轮播图区域 -->
        <div class="carousel-section">
            <el-carousel height="400px" :interval="5000" arrow="always">
                <el-carousel-item v-for="item in carousels" :key="item.id">
                    <component :is="item.url ? 'a' : 'div'" :href="item.url" :target="item.url ? '_blank' : null">
                        <img :src="'/api/' + item.image" :alt="item.title" class="carousel-image" />
                        <div class="carousel-title">{{ item.title }}</div>
                    </component>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 公告区域 -->
        <div class="announcement-section">
            <h2 class="section-title">最新公告</h2>
            <div class="announcement-list">
                <el-card v-for="item in announcements" :key="item.id" class="announcement-card"
                    :class="{ 'pinned': item.is_pinned }">
                    <div class="announcement-header">
                        <el-tag v-if="item.is_pinned" type="warning" size="small">置顶</el-tag>
                        <h3>{{ item.title }}</h3>
                        <!-- <el-tag :type="item.is_active ? 'success' : 'danger'" size="small">
                            {{ item.is_active ? '已启用' : '已禁用' }}
                        </el-tag> -->
                        <div style="flex: 1"></div>
                        <div class="announcement-time">{{ formatDate(item.created_at) }}</div>
                    </div>
                    <div class="announcement-content">{{ item.content }}</div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getData } from '/@/api/home';
import dayjs from 'dayjs';

// 数据状态
const carousels = ref([])
const announcements = ref([])

// 获取首页数据
const loadHomeData = async () => {
    try {
        const { data } = await getData()
        carousels.value = data.carousels
        announcements.value = data.announcements
    } catch (error) {
        console.error('数据加载失败:', error)
    }
}

// 时间格式化
const formatDate = (timestamp) => {
    return dayjs(timestamp).format('YYYY-MM-DD HH:mm')
}

onMounted(() => {
    loadHomeData()
})
</script>

<style scoped>
.homepage-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.carousel-section {
    margin-bottom: 40px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.carousel-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.carousel-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    font-size: 24px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.announcement-section {
    background: white;
    padding: 24px;
    border-radius: 8px;
}

.section-title {
    color: #333;
    border-left: 4px solid #409eff;
    padding-left: 12px;
    margin-bottom: 24px;
}

.announcement-card {
    margin-bottom: 16px;
    transition: all 0.3s;
    cursor: pointer;

    /* 新增hover效果 */
    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    /* 保持原有置顶样式 */
    &.pinned {
        border-left: 4px solid #e6a23c;
    }
}

.announcement-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.announcement-content {
    color: #666;
    line-height: 1.6;
}

.announcement-time {
    color: #999;
    font-size: 0.9em;
    text-align: right;
}
</style>
